<template>
	<!-- 视频搜索 -->
	<view class="searchVideo-main">
		<view class="search-header">
			<view class="search-input">
				<uni-search-bar
					radius="50"
					style="flex: 1"
					v-model="queryData.keyword"
					placeholder="请输入搜索内容"
					clearButton="always"
					cancelButton="none"
					@confirm="search"
					@cancel="cancel"
				/>
			</view>
			<view class="search-title" @click="search">搜索</view>
		</view>

		<view class="searchVideoList">
			<hwxcSearchVideo :videoInfoData="videoListData" />
		</view>
	</view>
</template>

<script>
import hwxcSearchVideo from '../../components/hwxcSearchVideo/hwxcSearchVideo.vue';
import { videoVideoList } from '../../api/video/index.js';
export default {
	data() {
		return {
			videoListData: [],
			queryData: {
				page: 1,
				limit: 10,
				keyword: ''
			}
		};
	},
	onLoad() {
		this.getvideoList();
	},
	components: {
		hwxcSearchVideo
	},
	methods: {
		async getvideoList() {
			try {
				const resData = await videoVideoList(this.queryData);
				this.videoListData = resData.data.data;
			} catch (e) {
				throw Error(e);
			}
		},
		
		search(){
			this.queryData.page = 1;
			this.getvideoList();
		},
		
		cancel(){
			this.queryData.page = 1;
			this.getvideoList();
		}
	}
};
</script>

<style scoped lang="scss">
.searchVideo-main {
	.search-header {
		display: flex;
		align-items: center;

		.search-input {
			flex: 1;
		}

		.search-title {
			width: 80rpx;
			font-size: 28rpx;
		}
	}

	.searchVideoList {
		box-sizing: border-box;
		padding: 30rpx;
	}
}
</style>
